<template>
  <div class="config-app-detail">
    <el-form
      ref="configAppFormRef"
      :model="formData"
      :rules="formRules"
      label-width="100px"
      :disabled="type === 'view'"
    >
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="应用ID" prop="id">
            <el-input v-model="formData.id" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="创建时间">
            <el-input v-model="formData.createTime" disabled />
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-form-item label="应用名称" prop="appName">
        <el-input v-model="formData.appName" placeholder="请输入应用名称" />
      </el-form-item>
      
      <el-form-item label="备注" prop="remark">
        <el-input
          v-model="formData.remark"
          type="textarea"
          :rows="4"
          placeholder="请输入备注信息"
        />
      </el-form-item>
      
      <el-form-item label="应用状态">
        <el-tag :type="getStatusType(formData.status)">
          {{ getStatusText(formData.status) }}
        </el-tag>
      </el-form-item>
      

      
      <el-form-item label="最后更新">
        <el-input v-model="formData.updateTime" disabled />
      </el-form-item>
    </el-form>
    
    <div class="form-actions" v-if="type === 'edit'">
      <el-button type="primary" @click="handleSave">保存</el-button>
      <el-button @click="handleReset">重置</el-button>
      <el-button @click="handleClose">关闭</el-button>
    </div>
    
    <div class="form-actions" v-else>
      <el-button type="primary" @click="handleEdit">编辑</el-button>
      <el-button @click="handleClose">关闭</el-button>
    </div>
  </div>
</template>

<script>
import { ElMessage, ElMessageBox } from 'element-plus'
import { getConfigAppDetail, updateConfigApp } from '../api/configApp.js'

export default {
  name: 'ConfigAppDetail',
  props: {
    data: {
      type: Object,
      required: true
    },
    type: {
      type: String,
      default: 'view' // view, edit
    }
  },
  data() {
    return {
      formData: {
        id: '',
        appName: '',
        remark: '',
        status: 'active',
        createTime: '',
        updateTime: ''
      },
      formRules: {
        appName: [
          { required: true, message: '请输入应用名称', trigger: 'blur' },
          { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  async mounted() {
    await this.loadDetailData()
  },
  methods: {
    async loadDetailData() {
      if (this.data && this.data.id) {
        try {
          const params = { id: this.data.id }
          const response = await getConfigAppDetail(params)
          
          if (response && response.data) {
            this.formData = {
              ...response.data,
              status: response.data.status || 'active',
              createTime: response.data.createTime || new Date().toLocaleString(),
              updateTime: response.data.updateTime || new Date().toLocaleString()
            }
          } else {
            this.initFormData()
          }
        } catch (error) {
          console.error('加载详情数据失败:', error)
          this.initFormData()
        }
      } else {
        this.initFormData()
      }
    },
    
    initFormData() {
      this.formData = { 
        ...this.data,
        status: this.data.status || 'active',
        createTime: this.data.createTime || new Date().toLocaleString(),
        updateTime: this.data.updateTime || new Date().toLocaleString()
      }
    },
    
    getStatusType(status) {
      const statusMap = {
        'active': 'success',
        'inactive': 'danger',
        'pending': 'warning'
      }
      return statusMap[status] || 'info'
    },
    
    getStatusText(status) {
      const statusMap = {
        'active': '运行中',
        'inactive': '已停用',
        'pending': '待激活'
      }
      return statusMap[status] || '未知状态'
    },
    
    async handleSave() {
      try {
        await this.$refs.configAppFormRef.validate()
        
        const response = await updateConfigApp(this.formData)
        
        if (response) {
          this.$emit('save', this.formData)
          ElMessage.success('保存成功')
          // 重新加载数据
          await this.loadDetailData()
        }
        
      } catch (error) {
        if (error !== false) { // 表单验证失败时error为false
          ElMessage.error('保存失败: ' + (error.message || '网络错误'))
          console.error('保存失败:', error)
        }
      }
    },
    
    handleReset() {
      this.initFormData()
      ElMessage.info('已重置表单')
    },
    
    handleEdit() {
      const currentRoute = this.$route
      this.$router.push({
        path: currentRoute.path,
        query: {
          ...currentRoute.query,
          action: 'edit'
        }
      })
    },
    

    handleClose() {
      this.$emit('close', this.$route.query.type + '-' + this.$route.query.id + '-' + this.$route.query.action)
    }
  },
  
  watch: {
    data: {
      async handler(newData) {
        await this.loadDetailData()
      },
      deep: true
    }
  }
}
</script>

<style scoped>
.config-app-detail {
  max-width: 800px;
}

.form-actions {
  margin-top: 30px;
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid #e4e7ed;
}

.form-actions .el-button {
  margin: 0 5px;
}

.el-form-item {
  margin-bottom: 20px;
}

.el-statistic {
  text-align: left;
}
</style>